class AssignComm extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            commsDisplay: {},
        }
    }

    componentDidMount() {
        layui.use(['layer', 'form'], () => {
            this.refs.bSelect.layuiInitComplete(true);
        });
    }

    commCallBack(commCode) {
        let params = {userCode: this.props.userCode};
        postJson("/user/getUserComms.x", params, (data) => {
            let userComms = data.data;
            let commList = this.refs.bSelect.commList;
            for (let i = 0; i < userComms.length; i++) {
                this.state.commsDisplay[userComms[i].commCode] = 'true';
            }

            for (let i = 0; i < commList.length; i++) {
                if (this.state.commsDisplay[commList[i].commCode] == 'true')
                    this.state.commsDisplay[commList[i].commCode] = commList[i].commCode + '-' + commList[i].commName;
            }
            this.setState({});
        })
    }

    commChoose() {
        if (Object.getOwnPropertyNames(this.state.commsDisplay).length + 1 > this.props.commCount) {
            layui.layer.alert("该账号上限小区" + this.props.commCount + "个,已超出!");
            return;
        }
        let commSelect = this.refs.bSelect.value;
        console.log(commSelect);
        this.assign(true, commSelect)
        //this.state.commsDisplay[commSelect] = commSelect+'-'+this.refs.bSelect.commName;
        //this.setState({});
    }

    removeItem(e) {
        let key = e.target.dataset.key;
        this.assign(false, key)
        //delete this.state.commsDisplay[key];
        //this.setState({});
    }


    getCommsDisplay() {
        let ret = [];
        for (let key in this.state.commsDisplay) {
            ret.push(
                <div className="layui-form-item" style={{marginLeft: 30}}>
                    <button className="layui-btn layui-btn-danger" data-key={key} onClick={(e) => this.removeItem(e)}
                            type="button">删除
                    </button>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    {this.state.commsDisplay[key]}
                    <hr/>
                </div>
            )
        }
        return ret;
    }

    assign(isAdd, commCode) {
        if (isAdd && Object.getOwnPropertyNames(this.state.commsDisplay).length > this.props.commCount) {
            layui.layer.alert("该账号上限小区" + this.props.commCount + "个,已超出!");
            return;
        }
        let param = {userCode: this.props.userCode};
        param.commCode = commCode;
        param.isAdd = isAdd;
        postJson("/user/assignComm.x", $.param(param), () => {
            if (isAdd) {
                this.state.commsDisplay[commCode] = commCode + '-' + this.refs.bSelect.commName;
            } else {
                delete this.state.commsDisplay[commCode];
            }
            this.setState({});
        })
    }

    render() {
        return (
            <form className="layui-form">
                <div style={{marginTop: 10}}>
                    <BuildingSelectList inputStyle={{float: 'left'}} ref="bSelect" isNotItem="true"
                                        selectCallback={(commCode) => this.commCallBack(commCode)}/>
                    &nbsp;&nbsp;
                    <button className="layui-btn" onClick={() => this.commChoose()} type="button">选择</button>
                </div>
                <hr/>
                {this.getCommsDisplay()}
            </form>
        )
    }
}

ReactDOM.render(<AssignComm userCode={$.query.get("userCode")}
                            commCount={$.query.get("commCount")}/>, document.getElementById("assignComm"));